<template>


    <div style="display: flex;flex-direction: column" >


      <div style="width: 100%;height: 60px;border: 0px blue solid;">

      <!--    顶部按钮栏    -->
        <header class="top-bar">
          <div style="margin-left: 5%">
            <el-text size="large" style="font-size: 23px;font-weight: bold">壮锦纹样在线设计平台</el-text>
          </div>

        <!--   按钮们       -->
          <div style="display: flex;flex-direction: row;margin-right: 30%;width: 500px">
            <router-link to="/layout/main" style="text-decoration: none;color: #696969">
              <div style="border: 0px black solid; height: 60px; width: 80px; padding: 10px;" class="awsCenterLayout">
                <text>首页</text>
              </div>
            </router-link>

            <router-link v-if="userStore.user.usertype=='client'" to="/layout/hall" style="text-decoration: none;color: #696969">
              <div style="border: 0px black solid; height: 60px; width: 100px; padding: 10px" class="awsCenterLayout">
                <text>纹样库</text>
              </div>
            </router-link>

            <router-link v-if="userStore.user.usertype=='client'" to="/layout/myRecord" @click="toggleBodyScroll('myRecord')" style="text-decoration: none;color: #696969">
              <div style="border: 0px black solid; height: 60px; width: 100px; padding: 10px" class="awsCenterLayout">
                <text>知识问答</text>
              </div>
            </router-link>

          </div>

          <nav class="navigation">
            <div style="display: flex;">
              <img v-if="!avatar && (userData.gender === '男' || !userData.gender)"
                   style="width: 70px;"
                   src="../assets/boy.png">
              <img v-else-if="!avatar && userData.gender === '女'"
                   style="width: 70px;"
                   src="../assets/girl.png">
              <img v-else
                   style="width: 50px; height: 50px; clip-path: circle(50%); object-fit: cover; margin-right: 10px"
                   :src="avatar">
              <div style="border: 0px blue solid;" class="awsCenter">
                <el-dropdown trigger="click">
                  <div class="el-dropdown-link">
                    {{userData.nickname?userData.nickname:'用户'+userData.username}}<el-icon class="el-icon--right"><arrow-down /></el-icon>
                  </div>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <router-link style="text-decoration: none;" to="/layout/personal">
                      <el-dropdown-item>
                          <text>个人中心</text>
                      </el-dropdown-item>
                      </router-link>
                      <el-dropdown-item @click="logOut">
                        退出登录
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </div>
          </div>

          </nav>
        </header>
      </div>



      <router-view></router-view> <!-- 渲染子路由 -->





    </div>








</template>

<script setup lang="ts">
import {
  ArrowDown, Delete, Plus,
} from '@element-plus/icons-vue'
import {conSuccessService, getCouIdService, getUserService} from "@/api/user.js";
import {computed, h, onMounted, onUnmounted, ref, watch} from "vue";
import {useUserStore} from "@/stores/user/user.js";
import {useRoute, useRouter} from "vue-router";
import {ElMessage, ElNotification} from "element-plus";
import {clientCheckService,conCheckService} from '@/api/task.js'
const userStore=useUserStore()
const router = useRouter()
const route = useRoute();
const toggleBodyScroll = (page) => {
  if (page === 'myRecord') {
    document.body.style.overflowY = 'hidden'; // 禁用滚动
  } else {
    document.body.style.overflowY = 'scroll'; // 启用滚动
  }
};
// 监听路由变化
watch(() => route.path, (newPath) => {
  toggleBodyScroll(newPath.includes('/layout/myRecord') ? 'myRecord' : '');
}, { immediate: true });


onUnmounted(() => {
  // 组件卸载时确保恢复默认样式
  document.body.style.overflowY = 'scroll';
});




watch(
    () => userStore.user,
    (newUser, oldUser) => {
      console.log('user变化了:', newUser);
      getUser()
      // 在这里可以添加其他逻辑，比如发起 API 请求等
    }
)


const userData=ref({})
const getUser=(async ()=>{
  const res=await getUserService()
  if(res.data!=null){
    //页面渲染
    userData.value=res.data
    avatar.value=res.data.avatar
  }

  //获取咨询师id
  if (userData.value.usertype!='client'){
    const getCouIdRes=await getCouIdService(userData.value.userid)
    if (getCouIdRes.code===200){
      userData.value.counselorid=getCouIdRes.data
    }
  }


})


const avatar=ref('')
onMounted(  async () => {

// 初始化时检查一次路由
  if (route.path.includes('/layout/myRecord')) {
    document.body.style.overflowY = 'hidden';
  }

  await getUser()
  userStore.setUser(userData.value)


//加载咨询室数据
  let resRoom=await getRoom()
  if (resRoom.code===200){
    resRoom.data.forEach(item=>{
      roomList.push({
        value: item.room,
        label: item.room,
      })
    })
  }




});




const logOut=(()=>{
  ElMessage.success("退出登录")
  userStore.logout()
  router.push('/')
})

const iconRef = ref<HTMLElement | null>(null);

//######################################################################################
import moment, {duration} from "moment/moment";

import {getRoom} from '@/api/room.js'

const showWriteInfo = ref(false)
const active = ref(1)

const next = () => {
  if (active.value < 3) {
    active.value++
  } else {
    active.value = 3
  }
}

const prev = () => {
  if (active.value > 1) {
    active.value--
  } else {
    active.value = 1
  }
}

//完善信息表单数据
//表单数据
const counselorForm=ref({
  username:'',
  specialty:'',
  bio:'',
  status:'0',
  counselorscheduleList:[]
})

const userForm=ref({
  nickname:'',
  realname:'',
  gender:'',
  avatar:'',
  email:'',
  phone:'',
  birthday:null,
  address:'',
  status:'2'
})

const weekendList = ref([
  {
    label: '星期一',
    value: '1'
  },
  {
    label: '星期二',
    value: '2'
  },
  {
    label: '星期三',
    value: '3'
  },
  {
    label: '星期四',
    value: '4'
  },
  {
    label: '星期五',
    value: '5'
  }
])

const timeRows = ref([
]);

const addRow = () => {
  timeRows.value.push({
    room: '',
    weekend: '',
    starttime: null,
    endtime:null
  });
};

const deleteRow = (index: number) => {
  timeRows.value.splice(index, 1);
};

const roomList=[]

const isShowButton=ref(false)

const status=ref('0')
const isDisabled=ref(false)
const submitTitle=ref('')

const showSubmitClose=ref(false)

import {ElMessage, type UploadProps} from 'element-plus'
import {upload} from '@/api/upload.js'
import { userRegisterService, userUpdate} from "@/api/user.js";
import {delCounselorService, getByUserIdService, saveCounselorService, upCounselorService} from "@/api/counselor.js";
import {isPrototypeOf} from "node";

const imageUrl = ref('')


const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('头像大小不能超过2MB')
    return false
  }
  return true
}

const UploadUrl = () => {
  // 因为action参数是必填项，我们使用二次确认进行文件上传时，直接填上传文件的url会因为没有参数导致api报404，
  // 所以这里将action设置为一个返回为空的方法就行，避免抛错
  return ""
}

const uploadHttpRequest=((data)=>{

})

const onFileChange=(async (file)=>{
  console.log(file)
  imageUrl.value = URL.createObjectURL(file.raw!)
  const res=await upload(file.raw)
  console.log(res)
  if (res.code===200){
    userForm.value.avatar=res.message
  }
})



const checkTimes=(()=>{

  for(let i = 0; i < timeRows.value.length;i++) {
    if (!timeRows.value[i].room||!timeRows.value[i].weekend||!timeRows.value[i].starttime||!timeRows.value[i].endtime){
      ElMessage.warning("工作时间未填写完整")
      return false;
    }
  }
  return true;
})
//时间转换
function convertStringToTime(timeString) {
  // 获取当前日期
  const currentDate = moment().format('ddd MMM DD YYYY');

  // 合并日期和时间字符串
  const dateTimeString = `${currentDate} ${timeString} GMT+0800 (中国标准时间)`;

  // 使用 moment.js 将日期时间字符串转换为 Date 对象
  const dateObject = moment(dateTimeString, "ddd MMM DD YYYY HH:mm:ss [GMT]Z (z)").toDate();

  return dateObject;
}


</script>

<style lang="scss">



body{
  overflow-y: scroll;
}

.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 30px;
  border-bottom: #C0C0C0 2px solid;
  background-color: #e8e8e8;
  height: 62px;
}

.logo {
  font-size: 24px;
  font-weight: bold;
}

.navigation {
  display: flex;
  gap: 20px;
}


.nav-item:hover {
  color: #FFFFFF; /* 悬停时链接颜色变化为白色 */
}

/* 样式应用于所有包含文本的div */
.awsCenterLayout {
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color 0.3s ease, color 0.3s ease; /* 仅平滑过渡背景色和文字颜色 */
  border: 1px black solid; /* 确保边框样式保持一致 */
  //background-color: #E6E6FA;
}

/* 鼠标悬停时的背景颜色变化 */
.awsCenterLayout:hover {
  background-color: #DCDCDC; /* 轻微的颜色变化，可以根据喜好调整 */
  cursor: pointer; /* 改变鼠标指针为手型，提示可点击 */
}

/* 点击时的背景颜色变化 */
/*.awsCenterLayout:active {
  background-color: #a7a5a6; !* 更深一点的颜色变化，表示被点击状态 *!
}*/

/* 可选：如果你想在悬停时也改变文字颜色 */
.awsCenterLayout:hover {
  color: #a8acb7; /* 改变文字颜色为蓝色（或者任何你想要的颜色） */
}

/* 去掉router-link默认的下划线 */
.awsCenterLayout a {
  text-decoration: none;
}

/* 确保悬停、点击时没有下划线 */
.awsCenterLayout a:hover,
.awsCenterLayout a:active {
  text-decoration: none;
}

//@import "compass/css3";

*, :before, :after{ box-sizing: border-box; }
// FONTS
$sans: 'Source Sans Pro', Helvetica, Arial, sans-serif;

// COLORS
$orange: #DF4500;
$gray: #35302D;
$gray-shine: #3C3735;
$white-off: #DFDBD9;

// REUSABLE STYLES
.unstyled{ list-style: none; padding: 0; margin: 0;
  a{ text-decoration: none; }
}
.list-inline{ overflow: hidden;
  li{ float: left; }
}

// HEADER STYLES
.header{
  position: fixed;
  left: 0; top: 0; bottom: 0;
  width: 17.5em;
  background: $gray;
}

.logo{
  text-transform: lowercase;
  font: 300 2em $sans;
  text-align: center;
  padding: 0; margin: 0;

  a{
    display: block;
    padding: 1em 0;
    color: $white-off;
    text-decoration: none;
    transition: .15s linear color;

    &:hover{
      color: #fff;
      span{ color: $orange; }
    }
  }

  span{
    font-weight: 700;
    transition: .15s linear color;
  }
}

// MAIN NAV
.main-nav{

  ul{
    border-top: solid 1px $gray-shine;
  }

  li{
    border-bottom: solid 1px $gray-shine;
  }

  a{
    padding: 1.1em 0;
    color: $white-off;
    font: 400 1.125em $sans;
    text:{
      align: center;
      transform: lowercase;
    }

  &:hover{
      color: #fff;
    }
  }
}

// SOCIAL LINKS
.social-links{
  border-bottom: solid 1px $gray-shine;

  li{
    width: 25%;
    border-left: solid 1px $gray-shine;
    &:first-child{ border: none; }
  }

  a{
    display: block;
    height: 5.5em;
    text-align: center;
    color: $gray-shine;
    font: 0.75em/5.5em $sans;
    &:hover{
      color: $white-off;
    }
  }
}

// HOVER SLIDE EFFECT
.list-hover-slide{

  li{
    position: relative;
    overflow: hidden;
  }

  a{
    display: block;
    position: relative;
    z-index: 1;
    transition: .35s ease color;

    &:before{
      content: '';
      display: block;
      z-index: -1;
      position: absolute;
      left: -100%; top: 0;
      width: 100%; height: 100%;
      border-right: solid 5px $orange;
      background: $gray-shine;
      transition: .35s ease left;
    }

    &.is-current,
    &:hover{

      &:before{
        left: 0;
      }
    }
  }
}
</style>